<template>
    <div>
      <div style="margin: 10px 0">
        <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </div>
      <div style="margin: 10px 0">
        <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
        <el-popconfirm
            class="ml-5"
            confirm-button-text='确定'
            cancel-button-text='我再想想'
            icon="el-icon-info"
            icon-color="red"
            title="您确定批量删除这些数据吗？"
            @confirm="delBatch"
        >
          <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
        </el-popconfirm>
  
      </div>
      <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="标题"></el-table-column>
        <el-table-column prop="content" label="内容">

          <!-- 查看具体内容 -->
          <template slot-scope="scope">
            <el-button @click="view(scope.row.content)" type="primary">查看内容</el-button>
          </template>
          
        </el-table-column>
        <el-table-column prop="user" label="用户"></el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
            <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除吗？"
                @confirm="del(scope.row.id)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
      <el-dialog title="文章信息" :visible.sync="dialogFormVisible" width="60%">
            <el-form label-width="80px" size="small">
              <el-form-item label="标题">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="内容">
                <mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible=false">取消</el-button>
              <el-button type="primary" @click="save">确定</el-button>
            </div>
      </el-dialog>

      <!-- 查看详细 -->
      <el-dialog title="文章信息" :visible.sync="viewDialogVis" width="60%">
        <el-card>
          <div>
            <mavon-editor
              class="md"
              :value="content"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
            />
          </div>
        </el-card>
      </el-dialog>
  
    </div>
  </template>
  
  <script>
  //import {serverIp} from "../../public/config";
  import request from '@/utils/request';
  import axios from 'axios';
  export default {
    name: "ArticleView",
    data() {
      return {
        // serverIp: serverIp,
        tableData: [],
        name: '',
        multipleSelection: [],
        form:{}, //对话框内容
        dialogFormVisible:false, //对话框可视化，默认不可视

        //查看信息卡片
        viewDialogVis:false,
        content:'',

        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    },
    created() {
      this.load()
    },
    methods: {

    // 查看按序方法
      view(content){
        this.content=content
        this.viewDialogVis=true
      },

      //绑定@imgAdd event
      imgAdd(pos,$file){
        let $vm = this.$refs.md
        // 第一步,将图片上传到服务器。
        const formData = new FormData();
        formData.append('file' ,$file);
        axios({
          url:'http://localhost:8080/file/upload' ,
          method: 'post',
          data: formData,
          headers:{'Content-Type':'multipart/form-data'},
        }).then((res)=> {
          //第二步,将返回的url替换到文本原位置![...](./0)->![...](urL)
          $vm.$img2Url(pos,res.data);
        })
      },
      load() {
        request.get("/article/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name,
          }
        }).then(res => {
  
          this.tableData = res.records
          this.total = res.total
  
        })
      },
      changeEnable(row) {
        request.post("/article/update", row).then(res => {
          if (res.code === '200') {
            this.$message.success("操作成功")
          }
        })
      },

      save(){ //保存新数据
            request.post("/article",this.form).then(res => {
                if(res){
                    this.$message.success("保存成功")
                    this.dialogFormVisible=false
                    this.load()
                }else{
                    this.$message.error("保存失败")
                }
            })
      },

      handleAdd(){ //新增数据
          this.dialogFormVisible=true
          this.form={}
      }, 
      handleEdit(row){ //编辑
            this.form=row
            this.dialogFormVisible=true
        },

      del(id) {
        request.delete("/article/" + id).then(res => {
          if (res.code === '200') {
            this.$message.success("删除成功")
            this.load()
          } else {
            this.$message.error("删除失败")
          }
        })
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      },
      delBatch() {
        let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
        request.post("/article/del/batch", ids).then(res => {
          if (res.code === '200') {
            this.$message.success("批量删除成功")
            this.load()
          } else {
            this.$message.error("批量删除失败")
          }
        })
      },
      reset() {
        this.name = ""
        this.load()
      },
      handleSizeChange(pageSize) {
        console.log(pageSize)
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
        console.log(pageNum)
        this.pageNum = pageNum
        this.load()
      },
      handleFileUploadSuccess(res) {
        console.log(res)
        this.$message.success("上传成功")
        this.load()
      },
      download(url) {
        window.open(url)
      },
      preview(url) {
        window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url))))
      },
    }
  }
  </script>
  
  <style scoped>
  
  </style>